<template>
	<div>
		<div class="outDiv">
			<scroller lock-x>
				<div>
					<div class="main">
						<div class="topShowArea">
							<div class="topsdiv">
								<span class="topsp" @click="commonJs.gosto('tealogin')">切换用户</span>
								<h2 class="toph2" @click="commonJs.gosto('/answerQuestion');">主页</h2>
							</div>
							<div class="user">
								<h2>欢迎</h2>
								<p>{{schoolName}} {{uName}} </p>
							</div>
						</div>
						<div class="middleMsgArea">
							<ul class="answerAreaList">
								<li class="answer_item">
									<div class="title">
										<div class="left">院校答疑</div>
										<div class="right" @click="commonJs.gosto('/answerQuestion', 'all')">查看全部</div>
									</div>
									<div class="statistics">
										<div class="block">
											<div class="count">{{ noReply }}</div>
											<div class="order" @click="commonJs.gosto('/answerQuestion', 'noReply')">
												<span>未进行回复的答疑</span>
												<img src="~/static/icon/icon_arrows_more_32.png" alt="">
											</div>
										</div>
										<div class="block">
											<div class="count">{{ todayNew }}</div>
											<div class="order" @click="commonJs.gosto('/answerQuestion', 'today')">
												<span>今日新增答疑</span>
												<img src="~/static/icon/icon_arrows_more_32.png" alt="">
											</div>
										</div>
									</div>
								</li>
								<li class="answer_item" v-show="false">
									<div class="title">
										<div class="left">专家答疑</div>
										<div class="right">查看全部</div>
									</div>
									<div class="statistics">
										<div class="block">
											<div class="count">71</div>
											<div class="order">
												<span>未进行回复的答疑</span>
												<img src="~/static/icon/icon_arrows_more_32.png" alt="">
											</div>
										</div>
										<div class="block">
											<div class="count">347</div>
											<div class="order">
												<span>今日新增答疑</span>
												<img src="~/static/icon/icon_arrows_more_32.png" alt="">
											</div>
										</div>
									</div>
								</li>
							</ul>
							<div class="operation" @click="handleCenterClick">
								<div class="userCenter">
									<img src="~/static/images/home_icon_uesr.png" alt="">
									<span>个人中心</span>
								</div>
								<p class="wechat">绑定微信，免登录</p>
							</div>
						</div>
					</div>
					<div style="width: 100%;height: 10vh;"></div>
				</div>
			</scroller>

		</div>
	</div>
</template>

<script>
	import axios from '~/plugins/axios';
	import ls from 'store2'
	export default {
		data() {
			return {
				uName: '',
				schoolName: '',
				todayNew: 0, // 今日新增答疑
				noReply: 0, // 未回复的答疑
			}
		},
		created() {
			this.commonJs.gologins();
			ls.set('preUrl', '../teachers/teaindex');
			setTimeout(() => {
				this.getSchoolQuestions()
				this.teachGetSchool()
			}, 20)

		},
		methods: {
			teachGetSchool() {
				this.$vux.loading.show({text:"正在加载"});
				axios.get('/university/me').then(res => {
					this.uName = res.name;
					this.schoolName = res.academy;
					this.$vux.loading.hide();

				}).catch((error) => {
					this.$vux.toast.text(error);
					this.$vux.loading.hide();
				})
			},
			// 院校答疑统计
			getSchoolQuestions() {
				axios.get('/university/statistics-yx-questions').then(res => {
					this.todayNew = res.today_new;
					this.noReply = res.no_reply;
				}).catch((error) => {
					this.$vux.toast.text(error);
					this.$vux.loading.hide();
				})
			},
			handleCenterClick() {
				this.$vux.toast.text('敬请期待！');
			}
		},
	}
</script>

<style lang="less" scoped>

	.outDiv {
		width: 100%;
		height: 100vh;
		background: #FFF;

		.main {
			position: relative;
			.topShowArea {
				width: 100%;
				height: 4.08rem;
				background: url('~/static/images/home_pic_bg.png') no-repeat;
				background-size: 100% 100%;

				.topsdiv {
					height: 0.88rem;
					line-height: 0.88rem;
					position: relative;
					padding: 0 0.3rem;
					box-sizing: border-box;

					.topsp {
						text-align: left;
						font-size: 0.26rem;
						color: #fff;
					}

					.toph2 {
						position: absolute;
						width: 3.5rem;
						height: 0.88rem;
						text-align: center;
						line-height: 0.88rem;
						left: 2rem;
						top: 0;
						font-size: 0.4rem;
						color: #222;
						font-weight: bold;
						color: #fff;
					}
				}

				.user {
					padding: 0 0.32rem;
					color: #FFF;
					letter-spacing: 1px;

					h2 {
						margin-top: 0.48rem;
						margin-bottom: 0.08rem;
						font-size: 0.5rem;
						font-weight: bold;
					}

					p {
						font-size: 0.28rem;
						// font-weight: bold;
					}
				}
			}

			.middleMsgArea {
				padding: 0 0.32rem;
				position: relative;
				top: -0.92rem;
			
				.answerAreaList {
					padding-left: 0;
					list-style: none;
				
					.answer_item {
						width: 6.86rem;
						height: 3.23rem;
						background: #fff;
						box-shadow: 0 0.02rem 0.10rem 0 rgba(153,153,153,0.2);
						border-radius: 0.1rem;
						margin-bottom: 0.4rem;
						padding: 0.28rem 0.32rem 0.28rem 0.34rem;

						.title {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 0.4rem;

							.left {
								color: #222;
								font-size: 0.36rem;
								line-height: 0.5rem;
								font-weight: bold;
							}
							.right {
								font-size: 0.26rem;
								color: #999;
								line-height: 0.37rem;
							}
						}

						.statistics {
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							.block {
								width: 2.94rem;
								height: 1.61rem;
								background: #F7F7FA;
								border-radius: 0.1rem;
								padding: 0.24rem;

								.count {
									color: #222;
									font-size: 0.5rem;
									font-weight: bold;
									line-height: 0.6rem;
									margin-bottom: 0.16rem;
								}

								.order {
									display: flex;
									justify-content: space-between;
									align-items: center;

									span {
										color: #999;
										font-size: 0.26rem;
										line-height: 0.37rem;
									}

									img {
										width: 0.32rem;
										height: 0.32rem;
									}

								}

							}

						}

					}

				}
				
				.operation {
					width: 6.86rem;
					height: 1.2rem;
					background: #fff;
					box-shadow: 0 0.02rem 0.10rem 0 rgba(153,153,153,0.2);
					border-radius: 0.1rem;
					padding: 0.28rem 0.32rem 0.28rem 0.34rem;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.userCenter {
						display: flex;
						justify-content: space-between;
						align-items: center;
						img {
							width: 0.64rem;
							height: 0.64rem;
						}
						span {
							color: #222;
							font-size: 0.3rem;
							font-weight: bold;
							line-height: 0.42rem;
							margin-left: 0.24rem;
						}
					}

					.wechat {
						color: #409EFF;
						font-size: 0.26rem;
						line-height: 0.37rem;
					}

				}
			}

		}
	}
</style>
